<template>
  <el-container style="background-image: url(../../static/img/loginBg.png);height: 100%;">
     <el-header>
     		  <img src="../../static/img/loginHeader.png" style="width: 100%;height: 90px;"/>
     </el-header>
      <el-main style="height: 700px;">
		  <div style="width: 600px;height:400px;float:left;">
		  			  <img src="../../static/img/loginImg.png" style="width: 412px;height: 440px;float: right;margin-top: 70px;"/>
		  </div>
		  <div style="width: 700px;height:400px;float:left;">
			  <h3 style="margin-top: 30px;margin-bottom: 30px;margin-left: 250px;color: #052D8B;">12123找回密码</h3>
			  <el-form ref="form" :model="driver":rules="rules" label-width="80px" style="width: 400px;margin-left: 150px;font-weight: 700;">
			    <el-form-item :label="loginForm.text1" prop="cardId">
			      <el-col :span="22">
			         <el-input v-model="driver.cardId"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.text2" prop="name">
			      <el-col :span="22">
			         <el-input v-model="driver.name"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.text3" prop="phone">
			      <el-col :span="22">
			         <el-input v-model="driver.phone"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.text4" prop="password">
			      <el-col :span="22">
			         <el-input v-model="driver.password" type="password"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.text5" prop="confimPassword">
			      <el-col :span="22">
			         <el-input v-model="driver.confimPassword" type="password"></el-input>
			      </el-col>
			    </el-form-item>
			    <el-form-item :label="loginForm.text6" prop="code">
			       <el-col :span="11">
			         <el-input v-model="driver.code" type="password"></el-input>
			       </el-col>
			       <el-col :span="11">
			          <el-button v-show="true" @click="sendCode()">发送验证码</el-button>
			       </el-col>
			    </el-form-item>
			    <el-form-item style="margin-top: 20px;margin-left: 100px;">
			      <el-button type="primary" @click="update()" style="font-weight: 700;">提交修改</el-button>
			      <el-button @click="ToLogin()" style="font-weight: 700;">去登录</el-button>
			    </el-form-item>
			  </el-form>
		  </div> 
      </el-main>
      <el-footer style="width: 100%;height: 50px;">
      		   <img src="../../static/img/loginFoot.png" style="width: 100%;height: 150px;"/>
      </el-footer>
  </el-container>
</template>

<script>
//引入工具对象myUtil.js  就可以调用其对象myUtil.url和方法myUtil.add
import myUtil from '../util/myUtil'
//引入axios模块
import axios from 'axios'
export default {
    data() {
      return {
        driver: {
          cardId: '',
          name:'',
          phone: '',
          password: '',
          confimPassword:'',
          code:'',
          confirmCode:""
        },
        loginForm:{
          text1:"身份证号",
          text2:"姓名",
          text3:"电话号码",
          text4:"新密码",
          text5:"验证密码",
          text6:"验证码"
        },
        rules: {
           cardId: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 15, max: 18, message: '身份证长度在15到18位', trigger: 'blur' }
           ],
           name: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 2, max: 5, message: '姓名2-5位', trigger: 'blur' }
           ],
           phone: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 11, max: 11, message: '电话号码11位', trigger: 'blur' }
           ],
           password: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 8, max: 12, message: '密码长度在8到12位', trigger: 'blur' }
           ],
           confimPassword: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 8, max: 12, message: '密码长度在8到12位', trigger: 'blur' }
           ],
           code: [
             { required: true, message: '信息不能为空', trigger: 'blur' },
             { min: 4, max: 4, message: '验证码4位', trigger: 'blur' }
           ],
         },
      }
    },
    methods: {
      update() {
        console.log(this.driver.phone);
        console.log(this.driver.code);
        if(this.driver.code !=this.driver.confirmCode){
          console.log('验证码错误!');
           return;
        }
        console.log('验证码正确!');
        var mythis=this;
        axios({
           headers:{
            'Content-Type':"application/json"
           },
           method:"post",
           url:myUtil.url+"/api/updateDriver",
           data:{
             cardId:mythis.driver.cardId,
             name:mythis.driver.name,
             phone:mythis.driver.phone,
             password:mythis.driver.password,
             }
         }).then(function(rs){
           console.log(rs.data.info);
           if(rs.data.info=="修改成功"){
             mythis.$alert(rs.data.info);
             //第一种本地存储 将登录成功的返回数据 存储在前端本地
             localStorage.setItem("driver",mythis.driver);
             //然后跳到启动主页面
             mythis.$router.push("loginTrafficsys");
           }else{
					mythis.$alert(rs.data.info);	 
				}
       })
      },
      //发送短信验证码http://localhost:8080/api/sendMessage?phone=15730593398
      sendCode(){
        console.log('sendMessage!');
        console.log(this.driver);
        var mythis=this;
        axios({
           headers:{
            'Content-Type':"application/json"
           },
           method:"post",
           url:myUtil.url+"/api/sendMessage",
           data:mythis.driver.phone,
         }).then(function(rs){
           console.log(rs.data.info);
           if(rs.data.info=="短信发送成功"){
             //将返回的code同步在前端
             mythis.driver.confirmCode=rs.data.code;
             console.log(mythis.driver.confirmCode);
           }
       })
      },
      ToLogin(){
        this.$router.push("loginTrafficsys");
      },
       phoneLogin(){//短信发送登录
        this.loginForm.nameTitle="手机号码",
        this.loginForm.passTitle="验证码",
        this.loginForm.ok=true,
        this.loginForm.num=11
       },
       AccountLogin(){//密码登录
        this.loginForm.nameTitle="账号",
        this.loginForm.passTitle="密码",
        this.loginForm.ok=false,
        this.loginForm.num=22
       }
    }
  }
</script>

<style>
</style>
